<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        .back2top {
            width: 149px;
            height: 250px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-image: url(img/rocket.png);
            display: none;
        }
        
        .back2top:hover {
            background-position: -149px 0;
        }
        
        .back2top .fly {
            background-image: url(img/rocketFly.gif);
            width: 149px;
            height: 250px;
            display: none;
        }
    </style>
</head>

<body>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
        <li>item41</li>
        <li>item42</li>
        <li>item43</li>
        <li>item44</li>
        <li>item45</li>
        <li>item46</li>
        <li>item47</li>
        <li>item48</li>
        <li>item49</li>
        <li>item50</li>
    </ul>

    <div class="back2top">
        <div class="fly"></div>
    </div>

    <script src="../../jQuery库/jquery-3.1.0.js"></script>

    <script>
        $(document).on("scroll", function() {
            if ($(this).scrollTop() > 800) {
                $(".back2top").fadeIn().css("opacity", 1)
            } else {
                $(".back2top").fadeOut()
            }
        })

        $(".back2top").on("click", function() {
            $(".fly").show();
            $(":root").animate({
                scrollTop: 0
            })

            $(this).delay(200).animate({
                top: -1600
            }, 1000, function() {
                $(this).css({
                    bottom: 20,
                    top: "auto"
                })
                $(".fly").hide();
                $(this).css("opacity", 0);
            })
        })
    </script>




    <!-- <script>
        $(document).scroll(function() {
            if ($(this).scrollTop() >= 600) {
                $(".back2top")
                    .fadeIn(300)
                    .css('opacity', 1)
            } else {
                $(".back2top").fadeOut(300)
            }
        })

        $(".back2top").click(function() {
            $(".fly").show();
            $("html").animate({
                scrollTop: 0
            }, 600)
            $(this).delay(200).animate({
                top: "-1600px"
            }, 600, function() {
                $(".back2top").css({
                    bottom: 20,
                    opacity: 0
                })
                $(this).hide()
                $(".fly").hide()
            })
        })
    </script> -->
</body>

</html>